<template>
  <div ref="chart" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts';
import { getRchart } from '@/api/workorder/cpkdata';

export default {
  name: 'DynamicLineChart',
  props: {
    tempId: {
      // type: String,
      required: true,
    },
  },
  data() {
    return {
      chartInstance: null,
      // 模拟数据
      chartData: [
        { date: '2024-11-01', CL: 120, UCL: 150, LCL: 200, series3: 160 },
        { date: '2024-11-02', CL: 180, UCL: 170, LCL: 190, series3: 180 },
        { date: '2024-11-03', CL: 130, UCL: 160, LCL: 210, series3: 150 }
      ]
    };
  },
  mounted() {
    this.getData();
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    async getData() {
      const res = await getRchart(this.tempId);
      this.chartData = res.data.data;
      this.initChart();
    },
    initChart() {
      // 初始化图表
      this.chartInstance = echarts.init(this.$refs.chart);
      const option = this.getChartOption();
      this.chartInstance.setOption(option);
      this.$emit('rchartEvent', false);
    },
    getChartOption() {
      // 提取 x 轴和动态系列数据
      const xAxisData = this.chartData.map(item => item.date);
      const seriesKeyshavedata = Object.keys(this.chartData[0]).filter(key => key !== 'date');
      const seriesKeys = Object.keys(this.chartData[0]).filter(key => key !== 'date' && key !== 'DATA');

      const series = seriesKeyshavedata.map(key => ({
        name: key,
        type: 'line',
        smooth: false,
        data: this.chartData.map(item => item[key]),
        symbol: key === 'UCL' || key === 'LCL' || key === 'CL' ? 'none' : 'circle', // 去掉圆点
        lineStyle: {
          type: key === 'UCL' || key === 'LCL' || key === 'CL' ? 'dashed' : 'solid', // series1 和 series2 使用虚线
          width: key === 'UCL' || key === 'LCL' || key === 'CL' ? 1 : 1, // 线条的宽度
        }
      }));

      // 计算 y 轴的最大值和最小值
      const allValues = this.chartData.flatMap(item => Object.values(item).filter(key => typeof key === 'number'));
      const minValue = Math.min(...allValues);
      const maxValue = Math.max(...allValues);

      // 调整 y 轴的范围
      const minAdjusted = (minValue * 0.9).toFixed(3);
      const maxAdjusted = (maxValue * 1.1).toFixed(3);

      return {
        title: {
          text: 'R-CHART',
        },
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            // 格式化悬浮提示
            let content = `${params[0].axisValue}<br/>`;
            params.forEach(param => {
              content += `${param.marker}${param.seriesName}: ${param.data}<br/>`;
            });
            return content;
          }
        },
        legend: {
          data: seriesKeys,
          top: 20
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisData,
          splitLine: { show: false }, // 隐藏y轴网格线
          axisLabel: {
            interval: 0,
            rotate: -45,
            fontSize: 8
          },
        },
        yAxis: {
          type: 'value',
          min: minAdjusted,
          max: maxAdjusted,
          splitLine: { show: false } // 隐藏y轴网格线
        },
        series: series
      };
    }
  }
};
</script>
